<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修复爱心动画</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 自适应窗口大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // 爱心类
        class Heart {
            constructor(x, y, size, speed) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.speed = speed;
                this.opacity = Math.random() * 0.5 + 0.5;
                this.opacitySpeed = (Math.random() * 0.02 + 0.01) * (Math.random() > 0.5 ? 1 : -1);
            }

            draw() {
                ctx.beginPath();
                const t = -Math.PI;
                const s = this.size;
                const x = this.x;
                const y = this.y;

                for (let i = 0; i <= 100; i++) {
                    const theta = t + (i / 100) * 2 * Math.PI;
                    const px = x + s * 16 * Math.pow(Math.sin(theta), 3);
                    const py = y - s * (13 * Math.cos(theta) - 5 * Math.cos(2 * theta) - 2 * Math.cos(3 * theta) - Math.cos(4 * theta));
                    if (i === 0) {
                        ctx.moveTo(px, py);
                    } else {
                        ctx.lineTo(px, py);
                    }
                }

                ctx.fillStyle = `rgba(255, 105, 180, ${this.opacity})`;
                ctx.fill();
                ctx.closePath();
            }

            update() {
                this.y += this.speed;
                this.opacity += this.opacitySpeed;
                if (this.opacity <= 0 || this.opacity >= 1) {
                    this.opacitySpeed = -this.opacitySpeed;
                }
                if (this.y > canvas.height + this.size * 20) {
                    this.y = -this.size * 20;
                    this.x = Math.random() * canvas.width;
                }
            }
        }

        // 创建爱心数组（20个，3-8像素）
        const hearts = [];
        for (let i = 0; i < 20; i++) {
            hearts.push(new Heart(
                Math.random() * canvas.width,
                Math.random() * canvas.height,
                Math.random() * 5 + 3,
                Math.random() * 0.5 + 0.2
            ));
        }

        // “I LOVE U”动画（修复文字不可见问题）
        class TextAnimation {
            constructor(text, x, y, fontSize) {
                this.text = text;
                this.x = x;
                this.y = y;
                this.fontSize = fontSize;
                this.opacity = 0.3; // 初始透明度
                this.scale = 0.9;
                this.glow = 10;
                this.opacitySpeed = 0.03;
                this.scaleSpeed = 0.015;
                this.glowSpeed = 0.5;
            }

            draw() {
                // 保存上下文状态
                ctx.save();
                // 重置变换以避免干扰
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                // 设置字体和对齐
                ctx.font = `bold ${this.fontSize}px "Courier New", monospace`;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                // 应用变换
                ctx.translate(this.x, this.y);
                ctx.scale(this.scale, this.scale);
                // 发光效果
                ctx.shadowColor = 'rgba(135, 206, 235, 0.8)';
                ctx.shadowBlur = this.glow;
                // 填充文字
                ctx.fillStyle = `rgba(135, 206, 235, ${this.opacity})`;
                ctx.fillText(this.text, 0, 0);
                // 描边
                ctx.strokeStyle = `rgba(255, 255, 255, ${this.opacity * 0.8})`;
                ctx.lineWidth = 2;
                ctx.strokeText(this.text, 0, 0);
                // 恢复上下文
                ctx.restore();
            }

            update() {
                this.opacity += this.opacitySpeed;
                this.scale += this.scaleSpeed;
                this.glow += this.glowSpeed;

                if (this.opacity >= 1 || this.opacity <= 0.3) {
                    this.opacitySpeed = -this.opacitySpeed;
                }
                if (this.scale >= 1.1 || this.scale <= 0.9) {
                    this.scaleSpeed = -this.scaleSpeed;
                }
                if (this.glow >= 15 || this.glow <= 5) {
                    this.glowSpeed = -this.glowSpeed;
                }
            }
        }

        const text = new TextAnimation('I LOVE U', canvas.width / 2, canvas.height / 2, 80);

        // 动画循环
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制和更新爱心
            hearts.forEach(heart => {
                heart.draw();
                heart.update();
            });

            // 绘制和更新文字
            text.draw();
            text.update();

            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>